<template>
    <div id="loginDom">
        <unify-header></unify-header>
            <div class="register m">
                <div class="reLe l">
                    <div class="rep2">
                        <div class="login_welcome">
                          <img src="http://image2.artup.com/static/pc/imgs/common/logo_1.jpg">
                            <span class="ng-binding">找回密码</span>
                        </div>
                    </div>
                    <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm" class="demo-ruleForm">
                        <!--用户名-->
                        <el-form-item class="repb repb1" label="" prop="userName" :rules="rules.userName">
                            <el-input :maxlength="11" :minlength="2"  placeholder="请输入手机号" v-model="numberValidateForm.userName"></el-input>
                        </el-form-item>
                        <!--手机验证码-->
                        <el-form-item class="repb repb3" label="" prop="codeNumber" :rules="rules.codeNumber">
                            <el-input class="inputWidth" placeholder="请输入验证码" v-model.number="numberValidateForm.codeNumber"></el-input>
                            <input class="pt2 l"  type="button" @click="getCodeNumber" value="获取验证码">
                        </el-form-item>
                        <el-form-item class="repb repb4" label="" prop="password" :rules="rules.password">
                            <!--<el-input  v-model="numberValidateForm.emailNumber"></el-input>-->
                            <el-input type="password"  placeholder="设置密码" v-model="numberValidateForm.password" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="zc01" @click="submitFn">
                        <a style="width: 260px;margin: 10px 0 17px 0;" class="zhuce">安全认证  &nbsp;|  &nbsp;AUTHENTICATION</a>
                    </div>
                </div>
                <div class="reRe r">
                    <div class="passReset">
                        <span style="display: block;
    margin: 90px auto 120px;"></span>
                        <a href="">密码忘了？别着急！</a>
                    </div>
                </div>
            </div>
        <unify-footer></unify-footer>
    </div>
</template>
<script>
    import Header from '@/components/header/header.vue'
    import Footer from '@/components/footer/footer.vue'
    import Api from '@/api.js'
    export default {
      data() {
        return {
          numberValidateForm: {
            codeNumber: '',
            userName: '',
            password: ''
          },
          rules: {
            userName: [
              {required: true, message: '请输入手机号', trigger: 'blur'},
              {min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur'}
            ],
            codeNumber: [
              {required: true, message: '验证码不能为空'}
            ],
            password: [
              { required: true, message: '密码不能为空' }
            ]
          }
        }
      },
      components: { //引入组件
        'unify-header': Header,
        'unify-footer': Footer
      },
      methods: { //执行的方法函数
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!')
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        getCodeNumber() {
          if (this.numberValidateForm.userName !== '') {
            Api.userInfoList.getCodeNumber({
              mobile: this.numberValidateForm.userName,
              type: 'modify'
            }).then((res) => {
              if (res.data.status === 'OK') {
                this.$alert(res.data.message, '提示')
              }
              console.log(res.status)
            })
          }
        },
        submitFn() {
          Api.userInfoList.userResetPassword({
            mobile: this.numberValidateForm.userName,
            captcha: this.numberValidateForm.codeNumber,
            pwd: this.numberValidateForm.password
          }).then((res) => {
            if (res.data.status === 'OK') {
              //this.$alert(res.data.message, '提示')
              this.$confirm(res.data.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                localStorage.setItem("avatar",res.data.data.photoUrl)
                window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname
              })
              //window.location.href = '/user/loginCallback?userDbId=' + res.data.data.passId + '&userName=' + res.data.data.nickname
            } else {
              this.$alert(res.data.message, '提示')
            }
            console.log(res)
          })
        }
      },
      created() {},
      mounted() {}
    }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">
    #loginDom {
        width:100%;
        height:100%;
        .register {
            width: 960px;
            height: auto;
            overflow: hidden;
            margin-top: 14px;
            .reLe {
                width: 660px;
                border: 1px solid #d8d8d8;
                background: white;
                padding-bottom: 30px;
                margin-bottom: 80px;
                .rep2 {
                    font-size: 18px;
                    margin-top: 60px;
                    padding-right: 96px;
                    text-align: right;
                    margin-bottom: 55px;
                    line-height: 40px;
                    overflow: hidden;
                   .login_welcome {
                        float: left;
                        margin: 0px 0px 0 48px;
                        font-size: 30px;
                        color: #333;
                        overflow: hidden;
                       >img {
                           margin-right: 30px;
                           cursor: pointer;
                           vertical-align: middle;
                           border: none;
                           outline: none;
                       }
                    }
                }
                .repb {
                    height: 55px;
                    padding-left: 118px;
                    margin-bottom: 28px;
                    position: relative;

                }
                .inputWidth{
                    width:260px;
                    float: left;
                }
                .el-form-item__content{
                    width: 460px;
                    height:50px;
                }
                .el-input__inner{
                    height:100% !important;
                }
                .el-input{
                    height:100% !important;
                }
                .repb1 {
                    background: url(./f-sj_03.png) no-repeat 39px 0;
                }
                .repb4 {
                    background: url(./f-tb_10.png) no-repeat 40px center;
                }
                .zc01 {
                    text-align: center;
                }
                .repb3 {
                    background: url(./f-tb1_07.png) no-repeat 40px center;
                }
                .repb3 input {
                    width:260px;
                }
                .repb3 .pt2 {
                    line-height: 50px;
                    text-align: center;
                    width: 160px;
                    height: 50px;
                    color: rgb(160, 9, 18);
                    font-size: 18px;
                    cursor: pointer;
                    margin-left: 20px;
                    margin-right: 18px;
                    font-family: 微软雅黑;
                    transition: all 0.4s;
                    border-radius: 4px;
                    background: white;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgb(161, 161, 161);
                    border-image: initial;
                }
                .repb3 .pt2:hover {
                    background-color: rgb(160, 9, 18);
                    color: #fff;
                }
                .zhuce {
                    height: 30px;
                    width: 202px;
                    font-size: 16px;
                    color: white;
                    border-radius: 4px;
                    background: #A00912;
                    border: none;
                    cursor: pointer;
                    display: inline-block;
                    line-height: 30px;
                    margin-top: 22px;
                }
                .repb_zhuc {
                    height: 55px;
                    padding-left: 118px;
                    margin-top: 36px;
                    .password_out {
                        line-height: 50px;
                        font-size: 16px;
                        float: right;
                        color: #a00912;
                        margin-right: 86px;
                    }
                }
                .newlL {
                    width: 30px;
                    height: 50px;
                    cursor: pointer;
                }
                .l {
                    float: left;
                }
                .rok {
                    height: 16px;
                    width: 16px;
                    border: 1px solid #C1C1C1;
                    margin-top: 16px !important;
                }
                .roker {
                    height: 8px;
                    width: 8px;
                    border-radius: 4px;
                    background: #A00912;
                    margin-top: 4px !important;
                }

                .rerr {
                    line-height: 50px;
                    font-size: 16px;
                    margin-left: 15px;
                    cursor: pointer;
                }
                .l {
                    float: left;
                }
                .m {
                    margin: 0 auto;
                }
            }
            .reRe{
                width: 282px;
                height: 492px;
                border: 1px solid #d8d8d8;
                background: white;
                margin-bottom: 30px;
                float: right;
                .passReset {
                    overflow: hidden;
                }
                .passReset >img {
                    display: block;
                    margin: 90px auto 120px;
                }
                .passReset >a {
                    font-size: 16px;
                    color: #a00912;
                    display: block;
                    text-align: center;
                    cursor: default;
                }

                >p {
                    text-align: center;
                    font-size: 24px;
                    line-height: 30px;
                    margin-top: 50px;
                    margin-bottom: 10px;
                }
                .reUl li {
                    height: 60px;
                    margin-bottom: 45px;
                    line-height: 60px;
                    cursor: pointer;
                    transition: all 0.4s;
                    position: relative;
                }
                .oli1 {
                    background: url(http://test.artup.com/img/dsf-f_06.jpg) no-repeat 40px center;
                }
                .reUl li a {
                    font-size: 18px;
                    color: #333;
                    margin-left: 120px;
                }
                .reUl li:hover{
                    left: 8px;
                }
            }
            .redd {
                color: #A00912;
            }
            .l {
                float: left;
            }
            .reRe {
                width: 282px;
                height: 492px;
                border: 1px solid #d8d8d8;
                background: white;
                margin-bottom: 30px;
            }
            .r {
                float: right;
            }

        }


    }
</style>
